<template>
  <div class="analysis-item">
    <a-row :gutter="16">
      <a-col :span="6" v-for="item in 3" :key="item">
        <span>2023年4月，214个流程模板中</span>
        <div class="title-cnt">
          <div class="title">运行时长环比增长</div>
          <div class="sub-title">
            <span style="font-size:30px">10</span>
            <span style="margin-left:10px">个模板</span>
          </div>
        </div>
        <div class="content">
          <span style="font-size:12px">TOP3 （环比增长）</span>
          <div class="ctn-item">
            <span>通用审批单</span>
            <triangle type="incr" :num="18"></triangle>
          </div>
          <div class="ctn-item">
            <span>定标结果确认表</span>
            <triangle type="incr" :num="18"></triangle>
          </div>
          <div class="ctn-item">
            <span>禾美项目存档登记表</span>
            <triangle type="incr" :num="18"></triangle>
          </div>

        </div>
      </a-col>
      <a-col :span="6">
        <div class="analysis-last">
          <span>最近6个月效率波动TOP3</span>
          <span>更多</span>
        </div>
        <div style="margin-top: 10px;">
          <div v-for="item in 3" :key="item" class="echarts-box">
            <div class="title">
              <div style="margin-bottom: 5px;">保证金申请单{{ item }}</div>
              <div><span>波动值</span><span style="font-weight: bold;"> 456.1</span></div>
            </div>
            <div class="last-ctn" :id="'main_' + item"></div>
          </div>
        </div>

      </a-col>
    </a-row>
  </div>
</template>

<script>
import triangle from './triangle.vue'
import * as echarts from 'echarts'
export default {
    components: {
        triangle
    },
    mounted() {
      for (let index = 1; index < 4; index++) {
        this.renderEcharts(index)
      }
    },
    methods: {
        renderEcharts(i) {
            var chartDom = document.getElementById(`main_${i}`);
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped>
.analysis-item {
    padding: 10px;
    box-shadow: 1px 1px #f2f3f5;
    background-color: #fff;

    .title-cnt {
        background-image: linear-gradient(to right, #07acef, #2cbaf4);
        padding: 5px 10px 10px 10px;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        margin-top: 10px;
    }

    .content {
        border: 1px solid #f2f3f5;
        border-top: none;
        padding: 10px;

        .ctn-item {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            padding: 3px 0;
            font-weight: bold;
        }
    }

    .analysis-last {
        display: flex;
        justify-content: space-between;
    }
    .echarts-box {
        display: flex;
        align-items: center;
        .title {
            font-size: 12px;
            word-break: keep-all;
            margin-right: 3px;
        }
    }

    .last-ctn {
        border: 1px solid #f2f3f5;
        height: 68px;
        width: 100%;
    }

}
</style>
